<!--
@author ljy
20220409
表格工具栏中的表格列按钮，用于配合表格，控制表格列显示的插件。
初始化时默认全部为选中状态。
 一、用法
（一）基本用法（例子参照部门菜单：@/components/base/table/TableToolbarColumnSetting.vue）
1.1 引入组件的方式
import TableToolbarColumnSetting from '@/components/base/table/TableToolbarColumnSetting.vue';
1.2 使用方式
<TableToolbarColumnSetting
        ref="columnSettingRef"
        class="operation-button"
        :tableColumns="tableColumns"
        @changeColumnSelect="getColumnsSelected"
      />
1.3 参数说明：
（1）tableColumns，表格的列集合属性
（2）changeColumnSelect(columnsSelected:string[])
当选中的表格列发生变化时触发，参数columnsSelected表示最新的列选择属性
-->

<template>
  <el-popover placement="bottom-end" :width="80" trigger="click">
    <template #reference>
      <el-button icon="Setting" class="button" />
    </template>
    <!--全选按钮-->
    <el-checkbox label="全选" v-model="allColumnsSelected" @change="handleCheckAllChange" />
    <el-divider style="margin: 4px 0" />
    <el-checkbox-group v-model="columnsSelected">
      <!--表格列-->
      <div v-for="item in tableColumns" :key="item.prop">
        <el-checkbox :label="item.label" :value="item.prop" />
      </div>
      <!--      <el-checkbox
        v-for="item in tableColumns"
        :label="item.prop"
        :key="item.prop"
      >{{item.label}}</el-checkbox>-->
    </el-checkbox-group>
  </el-popover>
</template>

<script lang="ts" setup>
import { ref, defineProps, watch, defineExpose, getCurrentInstance, onMounted } from 'vue';
import type { TableColumn } from '@/types/interface/base_interface';

// const { proxy } = getCurrentInstance();

import { defineEmits } from 'vue';
const emit = defineEmits(['changeColumnSelect']);
// 读取父容器传递过来的选择列表
interface Props {
  // 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  tableColumns: TableColumn[]; // 表格的列元素集合
}
const props = defineProps<Props>();
// 已经选择的表格列
const columnsSelected = ref<string[]>([]);
// 全选按钮的选中状态
const allColumnsSelected = ref(false);

// 获取选择的列表，设计来暴露给父组件使用
const getColumnsSelected = (): string[] => columnsSelected.value;
// 全选复选框切换操作
const handleCheckAllChange = (value: boolean): void => {
  if (value) {
    // 如果全选框为选中状态
    allColumnsSelected.value = true;
    // 先清空已选择列表
    columnsSelected.value = [];
    // 全选所有
    props.tableColumns.forEach((tableColumn: TableColumn) => {
      columnsSelected.value.push(tableColumn.prop);
    });
  } else {
    allColumnsSelected.value = false;
    // 清空已选择列表
    columnsSelected.value = [];
  }
};
// 监控已选择列表，保证全选状态显示的合理性
watch(
  columnsSelected,
  (newVal: any, oldVal: any) => {
    // proxy.$emit('changeColumnSelect', newVal);
    emit('changeColumnSelect', newVal);
    if (newVal.length < props.tableColumns.length) {
      // 如果选择的选项少于所有选项，则全选按钮不打钩
      allColumnsSelected.value = false;
    } else {
      allColumnsSelected.value = true;
    }
  },
  { immediate: true }
);

// 初始化时，默认是列组件是全部选中状态。后面由watch监听属性替代
// onMounted(() => {
//   handleCheckAllChange(true);
// });
//20240819加上，因为tableColumns可能在个别场景是异步交互的，因此要对异步交互后传过来的值进行处理
watch(
  () => props.tableColumns,
  (newVal: any, oldVal: any) => {
    handleCheckAllChange(true);
  },
  { deep: true, immediate: true }
);

defineExpose({
  getColumnsSelected,
  handleCheckAllChange,
  columnsSelected
});
</script>

<style lang="scss" scoped>
.button {
  margin: 0 0 0 5px;
}
</style>
